<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Element/Element.Position</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Element">Element</a></h4>
      <div class="menu-item"><a href="#Element:position">position</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Element"><a href="#Element">Type: Element</a></h1>
      <p class="description">Extends the <a href="../../../docs/core/Element/Element.html">Element</a> Type with the method <em>position</em> which sets the location of an element relative to another.</p>
      <h3>Tutorial/Demo</h3>
      <ul>
        <li><a href="http://www.clientcide.com/wiki/cnet-libraries/04-element/04-element.position">Online Tutorial/Demo</a></li>
      </ul>
      <h2 id="Element:position"><a href="#Element:position">Element Method: position</a></h2>
      <p class="description">Sets the location of an element relative to another (defaults to the document body).</p>
      <h3>Syntax</h3>
      <pre class="javascript">myElement.<span class="me1">position</span><span class="br0">(</span>options<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>options - (<em>object</em>) a key/value object with options</li>
      </ol>
      <h3>Options</h3>
      <ul>
        <li>relativeTo - (<em>element</em>) the element relative to which to position this one; defaults to <em>document.body</em>.</li>
        <li>position - (<em>string</em> OR <em>object</em>) the aspect of the relativeTo element that this element should be positioned. See position section below.</li>
        <li>edge - (<em>string</em> OR <em>object</em>) the edge of the element to set relative to the relative element's corner; this way you can specify to position this element's upper right corner to the bottom left corner of the relative element. This is optional; the default behavior positions the element's upper left corner to the relative element unless position == center, in which case it positions the center of the element to the center of the relative element. See position section below.</li>
        <li>offset - (<em>object</em>) x/y coordinates for the offset (i.e. {x: 10, y:100} will move it down 100 and to the right 10). Negative values are allowed.</li>
        <li>returnPos - (<em>boolean</em>) don't move the element, but instead just return the position object ({top: '#', left: '#'}); defaults to <em>false</em> </li>
        <li>relFixedPosition - (<em>boolean</em>) <em>true</em>: adds the scroll position of the window to the location to account for a fixed position relativeTo item; defaults to <em>false</em> </li>
        <li>ignoreMargins - (<em>boolean</em>) you can have the position calculate the offsets added margins if you like; defaults to <em>false</em>. If <em>true</em>, the corner of the element will be used EXCLUDING the margin.</li>
        <li>ignoreScroll - (<em>boolean</em>) if <em>true</em>, the scroll offset of the parent is ignored. defaults to <em>false</em>.</li>
        <li>allowNegative - (<em>boolean</em>) if <em>true</em> (the default), AND the element is not a descendent of an element that is positioned (relative or absolute), then the position will not allow negative values.</li>
        <li>minimum - (<em>object</em>) <em>x</em> and <em>y</em> values (<em>integers</em>) for hard minimum limits on the position. Unlike allowNegative, these are not conditional; if you give zero values for the x/y values, they will be obeyed regardless of any other setting.</li>
        <li>maximum - (<em>object</em>) <em>x</em> and <em>y</em> values (<em>integers</em>) for hard maximum limits on the position.</li>
      </ul>
      <h3>Position &amp; Edge Options</h3>
      <p>There are two ways to specify the position: strings and objects. The strings are combinations of "left", "right", and "center" with "top" (or "upper"), "bottom", and "center". These are case insensitive. These translate to:</p>
      <ul>
        <li>upperLeft, topLeft (same thing) - or upperleft, leftupper, LEFTUPPER etc.</li>
        <li>bottomLeft</li>
        <li>centerLeft</li>
        <li>upperRight, topRight (same thing)</li>
        <li>bottomRight</li>
        <li>centerRight</li>
        <li>centerTop</li>
        <li>centerBottom</li>
        <li>center</li>
      </ul>
      <p>Alternatively, you can be a little more expicit by using an object with x and y values. Acceptable values for the x axis are "left", "right", and "center", and for y you can use "top", "bottom" and "center".</p>
      <ul>
        <li>{x: 'left', y: 'top'} // same as "upperLeft" or "topLeft"</li>
        <li>{x: 'left', y: 'bottom'} // same as "bottomLeft"</li>
        <li>etc.</li>
      </ul>
      <p>Using these options you can specify a position for each corner of the relativeTo object as well as the points between those corners (center, left, top, right, bottom and the center of the entire object).</p>
      <h3>Returns</h3>
      <ul>
        <li>(<em>element</em> or <em>object</em>) This Element <em>unless</em> the option <em>returnPos</em> is set to true, in which case an object is returned with top and left values that can be passed to <em>Element.setStyle</em> (example: ({top: '200px', left: '100px'})).</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">position</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//centered to the middle of the window</span>
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">position</span><span class="br0">(</span><span class="br0">{</span>relativeTo: <span class="st0">'myDiv'</span><span class="br0">}</span><span class="br0">)</span>; <span class="co1">//element is in the center of myDiv</span>

$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">position</span><span class="br0">(</span><span class="br0">{</span>
    relativeTo: $<span class="br0">(</span><span class="st0">'myDiv'</span><span class="br0">)</span>,
    position: <span class="st0">'upperLeft'</span>,
    edge: <span class="st0">'upperRight'</span>

<span class="br0">}</span><span class="br0">)</span>; <span class="co1">//myElement's upper right corner is against myDiv's upper left corner</span>
</pre>
      <h3>Notes</h3>
      <ul>
        <li>The element must be absolutely positioned (if it isn't, this method will set it to be).</li>
      </ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
